<!--师资基础信息修改-->
<template>
    <div class="container" style="height:462px">
        <el-tabs v-model="activeName" >
            <el-tab-pane label="个人信息" name="first">
                <el-form ref="dataForm" :model="dataForm" :rules="rules" class="my-form-container demo-ruleForm" style="height:822px">
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label">编&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</div>
                            <div class="my-form-item-value">{{dataForm.bh}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.xm}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.xb}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">民&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;族<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.mz}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">出生日期<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.csrq}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯</div>
                            <div class="my-form-item-value">{{dataForm.jg}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">户籍所在地</div>
                            <div class="my-form-item-value">{{dataForm.hjszd}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">证件名称<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.zjmc}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">证件号码<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.zjhm}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">政治面貌</div>
                            <div class="my-form-item-value">{{dataForm.dqzzmm}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">入党（团）时间</div>
                            <div class="my-form-item-value">{{dataForm.rdtsj}}</div>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">系<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.xi}}</div>
                            <el-form-item  prop="xi" v-else>
                                <div class="my-form-item-value">
                                    <el-select class="inputWidth144" v-model="dataForm.xi">
                                        <el-option v-for="item in xiListOption" :key="item.label" :label="item.deptName" :value="item.deptName"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">教&nbsp;研&nbsp;室<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.jys}}</div>
                           <el-form-item  prop="jys" v-else>
                                <div class="my-form-item-value">
                                    <el-select class="inputWidth144" v-model="dataForm.jys">
                                        <el-option v-for="item in jysOption" :key="item.label" :label="item.deptName" :value="item.deptName"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">办公电话<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.dwdh}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">移动电话<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.yddh}}</div>
                            <el-form-item v-else prop="yddh">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="dataForm.yddh"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">入职时间<a>*</a></div>
                            <div class="my-form-item-value">{{dataForm.rzsj}}</div>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">人员类别<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.rwlb}}</div>
                            <el-form-item v-else prop="rwlb">
                                <div class="my-form-item-value">
                                    <el-select v-model="dataForm.rwlb" placeholder="请选择" class="inputWidth144">
                                        <el-option v-for="item in ryType" :key="item.label" :label="item.label" :value="item.label"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">所属组织<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.sszzName}}</div>
                            <el-form-item v-else prop="sszzName">
                                <div class="my-form-item-value sszz">
                                    <el-input class="inputWidth" v-model="dataForm.sszzName" disabled></el-input>
                                    <span class="small-btn green " @click="saveTree(false)">选择</span>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">技术职务</div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.jszw}}</div>
                            <el-form-item v-else prop="jszw">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="dataForm.jszw"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">技级资格</div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.jjzg}}</div>
                            <el-form-item v-else prop="jjzg">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="dataForm.jjzg"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">技职时间</div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.jzsj}}</div>
                            <el-form-item v-else prop="jzsj">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="dataForm.jzsj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">资格时间</div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.zgsj}}</div>
                            <el-form-item v-else prop="zgsj">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="dataForm.zgsj" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">图片查看</div>
                            <div v-if='type == 1' class="my-form-item-value imgFont">{{dataForm.tpName?dataForm.tpName:dataForm.tp}}</div>
                            <el-form-item v-else prop="name">
                                <div class="my-form-item-value imgInline">
                                    <div class="imgShow" v-show="dataForm.tp">
                                        <span>{{dataForm.tpName?dataForm.tpName:dataForm.tp}}</span>
                                        <img src="../../../assets/assessment/delete.png" @click="deleteImg">
                                    </div>
                                    <el-upload action="string"
                                        :show-file-list="false"
                                        :http-request="upLoadApi"
                                        accept=".jpg,.png,.doc,.docx"
                                        :before-upload="beforeAvatarUpload">
                                        <span class="small-btn purple">上传图片</span>
                                    </el-upload>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item lastOne">
                        <el-col :span="24">
                            <div class="my-form-item-label">备注</div>
                            <div v-if='type == 1' class="my-form-item-value">{{dataForm.bz}}</div>
                            <div v-else class="my-form-item-value assessment-design" style="line-height:88px">
                                <el-input v-model="dataForm.bz" type="textarea" :rows="3" style="width: 969px;" placeholder="请输入内容"></el-input>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="button-group">
                    <div class="" @click="saveBasic" v-if="type==2">保存</div>
                    <div class="" @click="cancel">取消</div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="教育背景" name="second">
                <el-form ref="ruleForm" :model="ruleForm" :rules="rulesJY" class="my-form-container demo-ruleForm" style="height:182px">
                    <el-row class="my-form-item">
                        <el-col :span="24">
                            <div class="my-form-item-label">最高学历<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{ruleForm.stage}}</div>
                            <el-form-item v-else prop="stage">
                                <div class="my-form-item-value">
                                    <el-select v-model="ruleForm.stage" placeholder="请选择" class="inputWidth144">
                                        <el-option v-for="item in xlType" :key="item.label" :label="item.label" :value="item.label"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item">
                        <el-col :span="12">
                            <div class="my-form-item-label">毕业单位<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{ruleForm.graduationCompany}}</div>
                            <el-form-item v-else prop="graduationCompany">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.graduationCompany"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">毕业日期<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{ruleForm.graduationDate}}</div>
                            <el-form-item v-else prop="graduationDate">
                                <div class="my-form-item-value">
                                    <el-date-picker class="time" v-model="ruleForm.graduationDate" type="date" value-format="yyyy-MM-dd"></el-date-picker>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="my-form-item" style="border:none">
                        <el-col :span="12">
                            <div class="my-form-item-label">专业名称<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{ruleForm.major}}</div>
                            <el-form-item v-else prop="major">
                                <div class="my-form-item-value">
                                    <el-input class="inputWidth" v-model="ruleForm.major"></el-input>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <div class="my-form-item-label">学位名称<a>*</a></div>
                            <div v-if='type == 1' class="my-form-item-value">{{ruleForm.degreeName}}</div>
                            <el-form-item v-else prop="degreeName">
                                <div class="my-form-item-value">
                                   <el-select v-model="ruleForm.degreeName" placeholder="请选择" class="inputWidth144">
                                        <el-option v-for="item in xwType" :key="item.label" :label="item.label" :value="item.label"></el-option>
                                    </el-select>
                                </div>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
                <div class="button-group">
                    <div class="" @click="saveJY" v-if="type == 2">保存</div>
                    <div class="" @click="cancel">取消</div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <!-- 选择组织 -->
        <el-dialog title="选择" :visible.sync="dialogVisible" :close-on-click-modal="false">
            <div class="treeContainer">
                <teacher-tree @getNode="getNode"></teacher-tree>
                 <div class="button-group">
                    <div class="" @click="saveTree(true)">保存</div>
                    <div class="" @click="cancelChose">取消</div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {getTeacherDetail,updateTeacherBasic,updateTeacherJYBJ,getTeacherXiList,getTeacherJYSList} from "@/api/student";
import TeacherTree from '@/components/teacherTree.vue'
import axios from 'axios'
  export default {
    data(){
        return {
            type:true,//true：编辑
            ryType:[
                {label:'现役'},
                {label:'文职'},
                {label:'聘用'},
            ],//人员类别
            xlType:[
                {label:'本科'},
                {label:'研究生'},
            ],//学历
            xwType:[
                {label:'学士'},
                {label:'硕士'},
                {label:'博士'},
            ],
            activeName:'first',
            dataForm:{
                sszz:'',
                sszzName:'',
                tpName:'老师头像.jpg',
                tp:'',
                departName:'',
            },
            ruleForm:{},
            rules: {
                xi: [{ required: true, message: '请选择系', trigger: 'change' }],
                jys: [{ required: true, message: '请选择教研室', trigger: 'change' }],
                rwlb: [{ required: true, message: '请选择人员类别', trigger: 'change' }],
                yddh: [
                    { required: true, message: '请填写移动电话', trigger: 'blur' },
                    {validator: (rule, value, callback) => {
                        if (!/^1[345789]\d{9}$/.test(value)) {
                            callback(new Error('移动电话格式不正确'));
                        } else {
                            return callback();
                        }}, trigger: 'blur'
                    }
                ],
                sszz: [{ required: true, message: '请选择所属组织', trigger: 'change' }],
            },
            rulesJY:{
                stage: [{ required: true, message: '请选择最高学历', trigger: 'change' }],
                graduationCompany: [{ required: true, message: '请填写毕业单位', trigger: 'blur' }],
                graduationDate: [{ required: true, message: '请选择毕业日期', trigger: 'change' }],
                major: [{ required: true, message: '请填写专业名称', trigger: 'blur' }],
                degreeName: [{ required: true, message: '请填写学位名称', trigger: 'blur' }],
            },
            dialogVisible:false,
            treeSSZZ:'',
            treeSSZZName:'',
            xiListOption:[],
            jysOption:[]
        }
    },
    components:{TeacherTree},
    mounted(){
        this.type = this.$route.query.type;
        this.$route.meta.tile = this.type == 1?'查看':'编辑'
        this.initList();
        this.xiList();
        this.jysList()
    },
    methods: {
        async initList(){
            let res = await getTeacherDetail({id:this.$route.query.id});
            if(res.code == 200){
                this.dataForm = res.data;
                this.ruleForm = res.data.teacherEducationVO
            }
        },
        async xiList(){
            let res = await getTeacherXiList({deptName:''});
            if(res.code == 200){
                this.xiListOption = res.data
            }
        },
        async jysList(){
            let res = await getTeacherJYSList({deptName:''});
            if(res.code == 200){
                this.jysOption = res.data
            }
        },
        deleteImg(){
            this.dataForm.tp = ''
        },
        getNode(e){
            this.treeSSZZ = e.id;
            this.dataForm.sszzName = e.departName;
        },
        //保存教育背景
        saveJY(){
            this.$refs['ruleForm'].validate(async(valid) => {
                if (valid) {
                    let param = {
                        ...this.ruleForm,
                        teacherId:this.dataForm.id
                    }
                    let res = await updateTeacherJYBJ(param);
                    if(res.code == 200){
                        this.$message.success('教育背景信息修改成功！');
                        this.$router.push({
                            path:'/teacher/foundation/list'
                        })
                    }
                } 
            });
        },
        //保存个人信息
        saveBasic(){
            this.$refs['dataForm'].validate(async(valid) => {
                if (valid) {
                    let res = await updateTeacherBasic(this.dataForm);
                    if(res.code == 200){
                        this.$message.success('个人信息修改成功！');
                        this.activeName = 'second';
                    }
                } 
            });
        },
        //取消
        cancel(){
            this.$router.push({
                path:'/teacher/foundation/list'
            })
        },
        //树的保存
        saveTree(isSave){
            if(isSave){
                this.dataForm.sszz = this.treeSSZZ;
                this.dataForm.sszzName = this.treeSSZZName
                this.dialogVisible = false
            }else{
                this.dataForm.sszz = '';
                this.dataForm.sszzName = ''
                this.dialogVisible = true
            }
        },
        //树的取消
        cancelChose(){
            this.dataForm.sszz = '';
            this.dataForm.sszzName = '';
            this.treeSSZZ = '';
            this.treeSSZZName = ''
            this.dialogVisible = false
        },
        //上传图片
        upLoadApi(item){
            let formData = new FormData();
            formData.append('file', item.file);
            let requestUrl = this.$store.state.studentUrl.baseUrl+'/file/upload'
            this.dataForm.tpName = item.file.name
            axios.post(requestUrl,formData).then(res => {
                if(res.data.success){
                    this.dataForm.tp = res.data.data.fileUri
                }
            }).catch(error => {
                this.$message.error('上传失败');
            })
        },
        beforeAvatarUpload(item){
            if(item.name.indexOf("jpg") == -1 && item.name.indexOf("png") == -1){
                this.$message.error('请上传图片或word');
            }
        },
    }
  };
</script>
<style lang="less" scoped>
	.assessment-edit-plan-container{
		.assessment-design {
			.el-textarea__inner {
				resize: none;
				font-size: 16px;
				color: rgba(0, 76, 167, 1);
			}
		}
	}
</style>
<style scoped lang="less" scoped>
@import "../../../styles/commonCss.less";
    .container{
        width: 1720px;
        height: 879px;
        margin: 20px 40px 18px;
        /deep/.el-tabs__item{
            width: 188px;
            height: 50px;
            background: rgba(0,76,167,0.08);
            border-radius: 0px;
            color: #004CA7;
            font-size: 16px;
            text-align: center;
            padding: 0;
            line-height: 50px;
            font-weight: bold;
        }
        /deep/.el-tabs__nav-wrap::after{
            background: #004CA7;
            height: 1px;
        }
        /deep/.el-tabs__item.is-active{
            background: #004CA7;
            color: #fff;
        }
        .my-form-item-label>a{
            color: #FF3819;
            font-size: 16px;
            margin: -8px 0 0 8px;
        }
    }
    /deep/.demo-ruleForm{
        .el-form-item{
            margin-bottom: 0!important;
            width: 100%;
        }
        .el-form-item__error {
            top: 75%;
            left: 42px;
        }
    }
    .lastOne{
        border:none;height:100px;
        /deep/.el-form-item__error {
            top:96%;
        }
    }
    /deep/.my-form-item-label{justify-content: center;padding: 0!important;}
    /deep/.my-form-container{
        margin-left: 0;
        margin-right: 0;
    }
	.inputWidth{width: 184px;}
    .inputWidth144{width: 144px;}
    .small-btn{
        line-height: 14px;
        font-size: 14px;
    }
    .purple{
        background: #EBE6FF;
        border: 1px solid #5230E9;
        color: #5230E9;
        width: 84px;
    }
    .green{
        background: #F1FFF8;
        border: 1px solid #02C86C;
        color: #02C86C ;
    }
    .sszz{
        display: flex;
        align-items: center;
        .small-btn{margin-left: 20px;width: 60px;}
    }
    .treeContainer{
        width: 60%;
        margin: 0 auto;
        .button-group{padding-bottom: 0;}
    }
    .imgInline{
        display: flex;
        align-items: center;
        .imgShow{
            display: flex;
            align-items: center;
            margin-right: 20px;
            span{
                text-decoration: underline;
                font-size: 16px;
                color: #004CA7;
                margin-right: 5px;
            }
            img{
                width: 18px;
                cursor: pointer;
            }
        }
    }
    .imgFont{
        display: flex;
        align-items: center;
        text-decoration: underline;
        font-size: 16px;
    }
</style>